<template>
	<view class="content">
		<view class="Banner">
			<image src="@/static/images/banner.png"></image>
		</view>
		<view class="QiYe">
			<view class="QiYeCenter">
				<!-- 如果已经登录，立即登录这几个字要变成切换企业 -->
				<view class="QiYeStrong">立即登录</view>
				<view class="QiYeEm">即享企业政策精准匹配~</view>
			</view>
		</view>
		<view class="PiPei">
			<view class="PiPeiCenter">
				<view class="PiPeiCenters">
					<image src="/static/images/pipeiimg.png"></image>
				</view>
				<view class="PiPeiCenterx">
					<input type="text" placeholder="输入企业名称，一键获取政策扶持">
					<view class="PiPeiButton">搜索</view>
				</view>
			</view>
		</view>
		<view class="TongJi">
			<view class="TongJiCenter">
				<view class="TongJiCenters">数据统计</view>
				<view class="TongJiCenterx">
					<view class="TongJiList">
						<view class="TongJiTitle">政策文件</view>
						<view class="TongJiCount">5513<view class="TongJiCountSpan">条</view></view>
					</view>
					<view class="TongJiList">
						<view class="TongJiCount">112</view>
						<view class="TongJiTitle">获批企业</view>
					</view>
					<view class="TongJiList">
						<view class="TongJiTitle">申报指南</view>
						<view class="TongJiCount">269<view class="TongJiCountSpan">项</view></view>
					</view>
				</view>
				<view class="TongJiCenterEnd">统计截至2024-01-01</view>
			</view>
		</view>
		<view class="End">匹配结果均由人工智能模型生成</view>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<customTabbar :currentPages="0" />
	</view>
</template>

<script>
	import customTabbar from '@/pages/components/custom-tabbar.vue';
	export default {
	  components: { customTabbar }
	};
</script>

<style lang="scss">
	page{
		background: #f7f8fc;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.Banner{
		width: 100%;
		height: 368rpx;
		image{
			width: 100%;
			height: 368rpx;
		}
	}
	.QiYe{
		width: 100%;
		height: 98rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-top: -74rpx;
		.QiYeCenter{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			height: 98rpx;
			padding: 0 27rpx;
			background: url("/static/images/qiyeb.png") no-repeat center / 100% 98rpx;
			.QiYeStrong{
				width: 70rpx;
				font-size: 30rpx;
				color: #ffffff;
				font-weight: bold;
				font-style: italic;
				line-height: 32rpx;
			}
			.QiYeEm{
				font-size: 28rpx;
				color: #546787;
				margin-left: 70rpx;
			}
		}
	}
	.PiPei{
		width: 100%;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		.PiPeiCenter{
			height: 325rpx;
			background: url("") no-repeat center / 100% 325rpx;
			.PiPeiCenters{
				height: 128rpx;
				padding: 49rpx 0 0;
				text-align: center;
				box-sizing: border-box;
				image{
					display: inline-block;
					width: 383rpx;
					height: 43rpx;
				}
			}
			.PiPeiCenterx{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 102rpx;
				border-radius: 30rpx;
				padding-left: 89rpx;
				padding-right: 30rpx;
				border: 2rpx solid #2f59fe;
				background: #ffffff url("/static/images/searchbtn.png") no-repeat 29rpx center / 37rpx 38rpx;
				input{
					width: 480rpx;
					font-size: 28rpx;
					color: #9fa3a8;
					border: none;
					outline: none;
					background: none;
				}
				.PiPeiButton{
					font-size: 28rpx;
					color: #2f59fe;
					font-weight: bold;
				}
			}
		}
	}
	.TongJi{
		width: 100%;
		padding: 0 24rpx 30rpx;
		box-sizing: border-box;
		.TongJiCenter{
			height: 386rpx;
			padding: 31rpx;
			border-radius: 10rpx;
			background: #ffffff;
			box-sizing: border-box;
			.TongJiCenters{
				font-size: 38rpx;
				color: #202020;
				font-weight: bold;
			}
			.TongJiCenterx{
				display: flex;
				padding: 20rpx 0 26rpx;
				justify-content: space-between;
				.TongJiList{
					width: 188rpx;
					height: 188rpx;
					text-align: center;
					padding: 42rpx 0 0;
					box-sizing: border-box;
					position: relative;
					.TongJiTitle{
						font-size: 28rpx;
						color: #4e5262;
					}
					.TongJiCount{
						font-size: 48rpx;
						color: #202020;
						font-family: "Arial";
						font-weight: bold;
						.TongJiCountSpan{
							display: inline;
							font-size: 28rpx;
							color: #9fa3a8;
							font-weight: normal;
							padding-left: 10rpx;
						}
					}
					&:nth-child(2) {
						background: url("/static/images/yuanquanimg.png") no-repeat center / 188rpx 188rpx;
						&::before{
							content: "";
							position: absolute;
							right: 0;
							bottom: 0;
							width: 188rpx;
							height: 188rpx;
							background: url("/static/images/banyuanimg.png") no-repeat center / 188rpx 188rpx;
							animation: rotate360 3s linear infinite;
						}
						@keyframes rotate360 {
							from {
								transform: rotate(0deg);
							}
							to {
								transform: rotate(360deg);
							}
						}
					}
				}
			}
			.TongJiCenterEnd{
				font-size: 24rpx;
				color: #9fa3a8;
				text-align: center;
			}
		}
	}
	.End{
		font-size: 24rpx;
		color: #9fa3a8;
		text-align: center;
		padding: 70rpx 0 0;
	}
</style>
